<template>
  <a-card class="employee-container">
    <a-form class="smart-query-form">
      <a-row class="smart-query-form-row">
        <a-form-item label="MMSI" class="smart-query-form-item">
          <a-input v-model:value="params.mmsi" placeholder="请输入mmsi" />
        </a-form-item>
        <a-form-item label="船舶名称" class="smart-query-form-item">
          <a-input v-model:value="params.vesselName" placeholder="请输入船舶名称" />
        </a-form-item>
        <a-form-item class="smart-query-form-item">
          <a-button type="primary" @click="queryData">
            <template #icon>
              <SearchOutlined />
            </template>
            查询
          </a-button>
          <a-button @click="reset" class="smart-margin-left10">
            <template #icon>
              <ReloadOutlined />
            </template>
            重置
          </a-button>
        </a-form-item>
      </a-row>
    </a-form>
    <div class="btn-group">
      <a-button class="btn" type="primary" @click="showDrawer" v-privilege="'system:employee:add'">添加名单</a-button>

      <span class="smart-table-column-operate">
        <TableOperator v-model="columns" :refresh="onload" />
      </span>
    </div>

    <a-table size="small" :columns="columns" :data-source="tableData" :pagination="false" :loading="tableLoading" :scroll="{ x: '100%' }" bordered>
      <template #bodyCell="{ text, record, column }">
        <template v-if="column.dataIndex === 'vesselType'">
          <span>{{ getDictLabel(text, shipType) }}</span>
        </template>
        <template v-else-if="column.dataIndex === 'operate'">
          <div class="smart-table-operate">
            <a-button v-privilege="'system:employee:update'" type="link" size="small" @click="showDrawer(record)">编辑</a-button>
            <a-button v-privilege="'system:employee:delete'" type="link" size="small" @click="deleteUser(record)">删除</a-button>
          </div>
        </template>
      </template>
    </a-table>
    <div class="smart-query-table-page">
      <a-pagination
        showSizeChanger
        showQuickJumper
        show-less-items
        :defaultPageSize="params.size"
        v-model:current="params.current"
        v-model:pageSize="params.size"
        :total="total"
        @change="onload"
        @showSizeChange="onload"
        :show-total="(total) => `共${total}条`"
      />
    </div>
    <FormModal ref="formModalRef" @refresh="onload" />
  </a-card>
</template>

<script setup>
  import { message, Modal } from 'ant-design-vue';
  import { reactive, ref, onMounted } from 'vue';
  import _ from 'lodash';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { smartSentry } from '/@/lib/smart-sentry';
  //
  import TableOperator from '/@/components/support/table-operator/index.vue';
  import FormModal from './formDialog.vue';
  import { getDictLabel } from '/@/utils/methods';
  import { shipType } from '/@/config/shipType';
  //
  import { api } from '/@/api/plat/watch';
  // ----------------------- 表格/列表/ 搜索 ---------------------
  const columns = ref([
    {
      title: 'MMSI',
      dataIndex: 'mmsi',
    },
    {
      title: '船舶名称',
      dataIndex: 'vesselName',
    },
    {
      title: '黑名单备注',
      dataIndex: 'description',
    },
    {
      title: '操作',
      dataIndex: 'operate',
      width: 140,
    },
  ]);
  const tableData = ref();

  let defaultParams = {
    current: 1,
    size: 10,
    watchType: 1, // 黑名单
    vesselType: undefined,
    vesselName: undefined,
    mmsi: undefined,
  };
  const params = reactive({ ...defaultParams });
  const total = ref(0);

  function queryData() {
    params.current = 1;
    onload();
  }

  // 搜索重置
  function reset() {
    Object.assign(params, defaultParams);
    onload();
  }

  const tableLoading = ref(false);
  // 查询
  async function onload() {
    tableLoading.value = true;
    try {
      let res = await api.queryPage(params);
      tableData.value = res.data.records;
      total.value = res.data.total;
    } catch (error) {
      smartSentry.captureError(error);
    } finally {
      tableLoading.value = false;
    }
  }

  onMounted(queryData);

  // 删除角色
  function deleteUser(row) {
    if (!row.watchId) {
      return;
    }
    Modal.confirm({
      title: '提示',
      content: '确定要删除该用户么？',
      okText: '确定',
      okType: 'danger',
      async onOk() {
        SmartLoading.show();
        try {
          await api.delete(row.watchId);
          message.info('删除成功');
          onload();
        } catch (e) {
          smartSentry.captureError(e);
        } finally {
          SmartLoading.hide();
        }
      },
      cancelText: '取消',
      onCancel() {},
    });
  }

  // ----------------------- 添加、修改、禁用 ------------------------------------
  const formModalRef = ref(); //组件

  // 展示编辑弹窗
  function showDrawer(rowData) {
    let data = {};
    if (rowData) {
      data = _.cloneDeep(rowData);
    }
    formModalRef.value.showDrawer(data);
  }
</script>
<style scoped lang="less">
  .employee-container {
    height: 100%;
  }
  .header {
    display: flex;
    align-items: center;
  }
  .query-operate {
    margin-left: auto;
    display: flex;
    align-items: center;
  }

  .btn-group {
    margin: 10px 0;
    .btn {
      margin-right: 8px;
    }
  }
</style>
